<mat-toolbar color="primary">
  <h1 class="mat-headline">
    {{ 'Transactions' | translate }}
  </h1>
</mat-toolbar>
<div style="margin:10px;">
  <ng-container *ngIf="blocks$ | async as blocks; else loading">
    <mat-accordion [multi]="true">
      <mat-expansion-panel [disabled]="block.transactions.length === 0" *ngFor="let block of blocks">
        <mat-expansion-panel-header>
          <mat-panel-title>
            Block #{{block.block_num}}
          </mat-panel-title>
          <mat-panel-description>
            {{block.transactions.length}} transactions
          </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
          <div class="table-container mat-elevation-z1">
            <table mat-table [dataSource]="block.transactions" style="border:none;">
              <ng-container *ngIf="columnHeaders$ | async as columnHeaders">
                <tr mat-header-row *matHeaderRowDef="columnHeaders"></tr>
                <tr mat-row *matRowDef="let row; columns: columnHeaders;"></tr>
              </ng-container>
              <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef>{{ 'Transaction ID' | translate }}</th>
                <td mat-cell *matCellDef="let transaction">
                  <a [routerLink]="['/transactions',block.block_num,transaction.trx.id||transaction.trx]">
                    <id-64 [id]="transaction.trx.id || transaction.trx"></id-64>
                  </a>
                </td>
              </ng-container>
              <ng-container matColumnDef="cpu">
                <th mat-header-cell *matHeaderCellDef>{{ 'CPU Usage' | translate }}</th>
                <td mat-cell *matCellDef="let transaction">
                  {{transaction.cpu_usage_us | number }} µs
                </td>
              </ng-container>
              <ng-container matColumnDef="net">
                <th mat-header-cell *matHeaderCellDef>{{ 'NET Usage' | translate }}</th>
                <td mat-cell *matCellDef="let transaction">
                  {{transaction.net_usage_words | toKB | number:'1.0-3'}} KB
                </td>
              </ng-container>
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>{{ 'Actions' | translate }}</th>
                <td mat-cell *matCellDef="let transaction">
                  {{transaction.trx.transaction?.actions?.length || 0}}
                </td>
              </ng-container>
            </table>
          </div>
        </ng-template>
      </mat-expansion-panel>
    </mat-accordion>
    <mat-paginator [pageIndex]="pageIndex" [pageSize]="pageSize" [length]="total" (page)="onPaging($event)" style="margin-top:16px;"></mat-paginator>
  </ng-container>
  <ng-template #loading>
    <app-spinner></app-spinner>
  </ng-template>
</div>
